var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
define(["require", "exports", "myWuZhui", "admin/application", "admin/pageNodes", "dilu", "react", "react-dom", "admin/services/user"], function (require, exports, myWuZhui_1, application_1, pageNodes_1, dilu_1, React, ReactDOM, user_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    let w = wuzhui;
    function default_1(page) {
        ReactDOM.render(h(RoleListPage, null), page.element);
    }
    exports.default = default_1;
    class RoleListPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = { role: {} };
        }
        showDialog(role) {
            if (role) {
                this.setState({ role });
            }
            ui.showDialog(this.roleDialog);
        }
        save() {
            if (!this.validator.check())
                return;
            let { role } = this.state;
            if (role.id) {
                return this.dataSource.update(role);
            }
            let q = role.id ? this.dataSource.update(role) : this.dataSource.insert(role);
            q.then(() => {
                ui.hideDialog(this.roleDialog);
            });
            return q;
        }
        componentDidMount() {
            let station = application_1.default.createService(user_1.UserService);
            this.dataSource = new w.DataSource({
                primaryKeys: ['id'],
                select() {
                    return __awaiter(this, void 0, void 0, function* () {
                        return station.roles();
                    });
                },
                update(dataItem) {
                    return station.updateRole(dataItem);
                },
                insert(dataItem) {
                    return station.addRole(dataItem.name, dataItem.remark);
                },
                delete(dataItem) {
                    return station.removeRole(dataItem.id);
                }
            });
            let it = this;
            myWuZhui_1.createGridView({
                dataSource: this.dataSource,
                element: this.rolesTable,
                columns: [
                    myWuZhui_1.boundField({ dataField: 'name', headerText: '名称' }),
                    myWuZhui_1.boundField({ dataField: 'remark', headerText: '备注' }),
                    myWuZhui_1.customField({
                        createItemCell(dataItem) {
                            let cell = new wuzhui.GridViewCell();
                            ReactDOM.render(h(React.Fragment, null,
                                h("button", { className: "btn btn-info btn-minier", style: { marginRight: 4 }, onClick: () => it.showDialog(dataItem) },
                                    h("i", { className: "icon-pencil" })),
                                h("button", { className: "btn btn-minier btn-danger", style: { marginRight: 4 }, ref: (e) => {
                                        if (!e)
                                            return;
                                        e.onclick = ui.buttonOnClick(() => it.dataSource.delete(dataItem), { confirm: `确定要删除'${dataItem.name}'角色` });
                                    } },
                                    h("i", { className: "icon-trash" })),
                                h("button", { className: "btn btn-info btn-minier", style: { marginRight: 4 }, onClick: () => application_1.default.redirect(pageNodes_1.siteMap.nodes.member_role.name, { roleId: dataItem.id }) },
                                    h("span", null, "\u8BBE\u7F6E\u6743\u9650"))), cell.element);
                            return cell;
                        },
                        headerStyle: { width: '160px', textAlign: 'center' },
                        headerText: '角色',
                        itemStyle: { textAlign: 'center' },
                    })
                ]
            });
            this.validator = new dilu_1.FormValidator(this.roleDialog, { name: 'name', rules: [dilu_1.rules.required('请输入角色名称')] });
        }
        render() {
            let { role } = this.state;
            return h(React.Fragment, null,
                h("ul", { key: 10 },
                    h("li", { className: "pull-right" },
                        h("button", { className: "btn btn-sm btn-primary", onClick: () => this.showDialog() },
                            h("i", { className: "icon-plus" }),
                            h("span", null, "\u6DFB\u52A0\u89D2\u8272")))),
                h("table", { key: 20, ref: (e) => this.rolesTable = e || this.rolesTable }),
                h("div", { key: 30, className: "modal fade", ref: (e) => this.roleDialog = e || this.roleDialog },
                    h("div", { className: "modal-dialog" },
                        h("div", { className: "modal-content" },
                            h("div", { className: "modal-header" },
                                h("button", { type: "button", className: "close", onClick: () => ui.hideDialog(this.roleDialog) },
                                    h("span", { "aria-hidden": "true" }, "\u00D7")),
                                h("h4", { className: "modal-title" }, "\u6DFB\u52A0\u89D2\u8272")),
                            h("div", { className: "modal-body form-horizontal" },
                                h("div", { className: "form-group" },
                                    h("label", { className: "col-sm-2 control-label" }, "\u540D\u79F0*"),
                                    h("div", { className: "col-sm-10" },
                                        h("input", { name: "name", type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u89D2\u8272\u540D\u79F0", value: role.name || '', onChange: e => {
                                                role.name = e.currentTarget.value;
                                                this.setState({ role });
                                            } }))),
                                h("div", { className: "form-group" },
                                    h("label", { className: "col-sm-2 control-label" }, "\u5907\u6CE8"),
                                    h("div", { className: "col-sm-10" },
                                        h("input", { name: "name", type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u5907\u6CE8", value: role.remark || '', onChange: e => {
                                                role.remark = e.currentTarget.value;
                                                this.setState({ role });
                                            } })))),
                            h("div", { className: "modal-footer" },
                                h("button", { name: "cancel", type: "button", className: "btn btn-default", onClick: () => ui.hideDialog(this.roleDialog) }, "\u53D6\u6D88"),
                                h("button", { name: "ok", type: "button", className: "btn btn-primary", ref: (e) => {
                                        ui.buttonOnClick(e, () => this.save());
                                    } }, "\u786E\u5B9A"))))));
        }
    }
});
